<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>选项卡</title>
  <style>
	*{margin: 0; padding: 0;}
	div:first-child {
		margin: 100px 20px;
	}
	body {
		background: #ccc;  
	}
	div h2 {
		color: #fff;
		margin-bottom: 20px;
		font-size: 20px;
	}
	div h2::selection {
		color: #666;
	}
	div > div {
		width: 200px;
		height: 200px;
		background: #376b1f;
	}
	div > div {
		display: none;
		width: 200px;
		height: 200px;
		padding: 10px;
		border-radius: 5px;
	}
	div input {
		display: none;
	}
	div label {
		display: inline-block;
		width: 50px;
		height: 25px;
		background: #6a9e52;
		border-radius: 5px 5px 0px 0px;
		cursor: pointer;
		font-size: 14px;
		color: #fff;
		line-height: 25px;
		text-indent:10px;
		transition:background .5s;
		transition:padding-top .3s;
	}
	div label::selection {
		color: #3c3;
	}
	label:first-of-type {
		margin-left: 20px;
	}
	div label:hover {
		background: #508438;
	}
	div p {
		font-size: 12px;
		line-height: 30px;
		color: #fff;
	}
	div p::selection {
		color: #3c3;
	}
	input:checked + label{
		padding-top: 3px;
		background: #376b1f;
		text-decoration: underline;
	}
	input#one:checked ~ div:first-of-type{
		display: block;
	}
	input#two:checked ~ div:nth-of-type(2){
		display: block;
	}
	input#three:checked ~ div:last-of-type{
		display: block;
	}
  </style>
 </head>
 <body>
	<div>
		<h2>纯CSS制作TAB选项卡</h2>
		<input type="radio" id='one' name='btn' checked><label for='one'>头条</label><input type="radio" id='two' name='btn'><label for='two'>公告</label><input type="radio" id='three' name='btn'><label for='three'>足球</label>
		<br>
		<div>
			<p>[热议]GalaxyS8成最值得期待新机</p>
			<p>[热议]GalaxyS8成最值得期待新机</p>
			<p>[热议]GalaxyS8成最值得期待新机</p>
			<p>[热议]GalaxyS8成最值得期待新机</p>
		</div>
		<div>
			<p>[公告]笔记本每1000减100</p>
			<p>[公告]笔记本每1000减100</p>
			<p>[公告]笔记本每1000减100</p>
			<p>[公告]笔记本每1000减100</p>
		</div>
		<div>
			<p>[足球]苏联足球俱乐部旗航店</p>
			<p>[足球]苏联足球俱乐部旗航店</p>
			<p>[足球]苏联足球俱乐部旗航店</p>
			<p>[足球]苏联足球俱乐部旗航店</p>
		</div>

		
	</div>
  
 </body>
</html>
